<template>
    <view class="sliderVerify-shade" v-if="show">
        <view class="sliderVerify-wrap">
            <view class="refresh" @click="refresh">
                <image class="refreshImg" src="/static/image/share/download.png"></image>
                <text>刷新</text>
            </view>
            <view class="imgWrap">
                <image class="img" :src="src"></image>
                <view class="over" :style="{ left: left + 'px', top: top + 'px' }"></view>
                <view class="smartImg" :style="{ left: sleft + 'px', top: stop + 'px' }">
                    <image class="simg" :style="{ left: -left + 'px', top: -top + 'px' }" :src="src"></image>
                </view>
            </view>
            <view class="sliderBox" @touchend="sliderEnd">
                <movable-area class="sliderF">
                    <movable-view :animation="true" class="sliderS" :x="sliderx" direction="horizontal" @change="startMove">
                        <image class="icon" src="/static/image/goods_share.png"></image>
                    </movable-view>
                </movable-area>
                <view class="bgC">
                    <text>拖动滑块完成整块拼图</text>
                    <view class="bgC_left" :style="{ width: backLeft + 'px' }"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "slider-verify",
    props: {
        show: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        show() {
            this.random();
        },
    },
    data() {
        return {
            left: 0,
            top: 0,
            sleft: 0,
            sleftDefault: 0,
            stop: 0,
            sliderx: 0,
            backLeft: 0,
            message: "",
            src: "",
            bgImg: "/static/app/bg.jpg", //背景图片
        };
    },
    mounted() {
        this.random();
    },
    methods: {
        random() {
            let imgLegth = 8;
            let ram = Math.random();
            this.left = Math.floor(80 * ram) + 140; //140-220
            this.top = this.stop = Math.floor(80 * ram) + 10;
            this.sleft = this.sleftDefault = Math.floor(70 * ram) + 10;
            if (Math.floor(imgLegth * ram) == 8) {
                this.src = this.bgImg;
            } else {
                this.src = this.bgImg;
            }
            this.sliderx = 1;
            setTimeout(() => {
                this.sliderx = 0;
                this.refreshStatus = false;
            }, 300);
        },
        refresh() {
            this.message = "";
            this.random();
        },
        startMove(e) {
            this.backLeft = e.detail.x + 18;
            this.sleft = this.sleftDefault + e.detail.x;
        },
        sliderEnd() {
            if (Math.abs(this.sleft - this.left) <= 4) {
                this.message = "验证成功!";
                console.log("[验证成功]");
                this.$emit("sliderVerifySuccessHandle");
            } else {
                this.message = "验证失败，请重试";
                this.$u.toast(this.message);
                setTimeout(() => {
                    this.message = "";
                    this.sliderx = 1;
                    setTimeout(() => {
                        this.sliderx = 0;
                    }, 300);
                }, 1000);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.sliderVerify-shade {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
}
.sliderVerify-wrap {
    position: relative;
    background: #fff;
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
    .refresh {
        position: absolute;
        right: 30rpx;
        top: 124px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        z-index: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .refreshImg {
            transition: all 0.3s;
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
    }
    .imgWrap {
        position: relative;
        width: 280px;
        height: 150px;
        border-radius: 8px;
        margin: 0 auto;
        overflow: hidden;
        background: #ddd;
        margin-top: 9px;
        .img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .over {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background: #ddd;
            box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.9);
        }

        .smartImg {
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            overflow: hidden;
			background: #fff;
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.9);

            .simg {
                position: absolute;
                display: block;
                width: 280px;
                height: 150px;
            }
        }
    }
}

.sliderBox {
    width: 280px;
    margin: 20px auto;
    height: 22px;
    position: relative;
    .sliderF {
        width: 100%;
        height: 100%;
        z-index: 3;
        .sliderS {
            height: 36px;
            width: 36px;
            background: #eb4d4d;
            border-radius: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -8px;
            .icon {
                width: 20px;
                height: 20px;
            }
        }
    }

    .bgC {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 22px;
        border-radius: 22px;
        line-height: 22px;
        font-size: 14px;
        color: #666666;
        background-color: #e6e6e6;
        box-shadow: inset 0 0 4px #e6e6e6;
        text-align: center;
        overflow: hidden;
    }

    .bgC_left {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 22px;
        border-top-left-radius: 22px;
        border-bottom-left-radius: 22px;
        line-height: 22px;
        font-size: 14px;
        background-color: #eb4d4d;
        box-shadow: inset 0 0 4px #eb4d4d;
        text-align: center;
    }
}
</style>
